<template>
    <div>
        <el-aside width="200px">
            <el-row class="tac">
              <el-col>
                <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                >
                  <el-menu-item index="1" @click="goPage('home')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">用户管理</span>
                  </el-menu-item>
        
                  <el-menu-item index="2" @click="goPage('order')">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">经纬度信息管理</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
    </div>
</template>
<script>
    var $this = {};
    export default {
    data() {
        return {};
    },
    beforeCreate() {
        $this = this;
    },
    methods: {
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
        console.log(key, keyPath);
        },

        goPage(link) {
        if (link === "home") {
            $this.$router.push("/main").catch(error => error);
        } else if ((link == "order")) {
            $this.$router.push("/addr").catch(error => error);
        } else {}
        }
    }
    };
  </script>
  <style scoped>
    .el-row{
    height: 100%;
    }

    .el-menu{
    border-right:none;
    }
    .el-aside{
    border-right: 1px solid #f5f1f1;
    }
  </style>
  